<template>
<div>
<div class="headerL" style="display:flex;height:40px;background:#000"><span style="color:#FFF" @click="back">＜返回</span><b style="color:#fff">收货地址</b></div>
    <van-address-list
  v-model="chosenAddressId"
  :list="list"
  @add="onAdd"
  @edit="onEdit"
  @select="onBtn"
/>
</div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { AddressList, Toast } from 'vant'
Vue.use(AddressList)
Vue.use(Toast)
export default {
  data () {
    return {
      chosenAddressId: 1,
      list: []
    }
  },

  methods: {
    back () {
      this.$router.back()
    },
    onAdd () {
      this.$router.push('/addAdd')
    },
    onEdit (item, index) {
      console.log(item)
      this.$router.push('/addAdd?addressid=' + item.addressid)
    },
    onBtn (item, index) {
      this.list.map(res => {
        res.id = 0
      })
      item.id = 1
      axios.post('/address/update', {
        addressid: item.addressid,
        flag: 1,
        userid: localStorage.getItem('userid'),
        name: item.name,
        tel: item.tel,
        address: item.address
      })
    },
    deleteData (item, index) {
      console.log(item)
    }
  },
  created () {
    let arr = []
    axios.get('/address?userid=' + localStorage.getItem('userid')).then(res => {
      console.log(res)
      res.data.data.map(data => {
        arr.push({
          id: data.flag,
          name: data.name,
          tel: data.tel,
          address: data.address,
          addressid: data.addressid
        })
      })
      this.list = arr
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.headerL{
    line-height: 40px;
      span{
      display: inline-block;
      text-indent: 10px;
    }
    b{
      display: inline-block;
      @include flex(2);
      text-align: left;
      text-indent: 1.2rem;
    }
}
</style>
